<template>
    <div class="clearfix">
        <section class="content-header">
            排班管理&nbsp;/&nbsp;岗位管理
        </section>

        <!-- 查询框 -->
        <section class="select-body clearfix">
            <div class="col-md-2 clearfix">
                <danwei v-model="selectData.companyId" />
            </div>
            <div class="col-md-2 clearfix">
                <bumen v-model="selectData.deptId" :companyId="selectData.companyId" />
            </div>
            <div class="col-md-2 clearfix">
                <gangwei v-model="selectData.jobName" :companyId="selectData.companyId" :deptId="selectData.deptId" />
            </div>
            <div class="col-md-1 clearfix">
                <button type="button" class="btn btn-primary" style="float:right" @click="$refs.page.getList(1)">搜索</button>
            </div>
            <div class="col-md-1 clearfix">
                <button type="button" class="btn btn-primary" style="float:right" @click="reset()">重置</button>
            </div>
        </section>

        <!-- 操作框 -->
        <section class="main clearfix">
            <div class="box">
                <div class="row" style="margin:0">
                    <div class="col-md-1 deal">
                        <router-link :to="{path:'addStation'}">
                            <button type="button" class="btn btn-primary">
                                <i class="fa fa-plus" aria-hidden="true"></i>新增值班岗位</button>
                        </router-link>
                    </div>
                    <div class="col-md-1 deal">
                        <button type="button" class="btn btn-primary" @click="removeBatch()">
                            <i class="fa fa-times" aria-hidden="true"></i>批量删除</button>
                    </div>

                </div>
            </div>
        </section>

        <!-- table数据表格 -->
        <section class="main clearfix">
            <div class="box">
                <div class="box-body">
                    <table id="example" class="table table-bordered table-hover" style="font-size:14px">
                        <thead style="font-weight:700">
                            <tr>
                                <td><input type="checkbox" name="" id="" :checked="planList.length===deleteId.length && deleteId.length" @click="checkedAll"></td>
                                <td>岗位名称</td>
                                <td>单位</td>
                                <td>部门</td>
                                <td>负责人</td>
                                <td>值班时间</td>
                                <td>备注</td>
                                <td>操作</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-if="planList.length==0">
                                <td colspan="999">暂无数据</td>
                            </tr>
                            <tr v-for="item in planList" :key="item.value">
                                <td><input type="checkbox" :checked="deleteId.indexOf(item.palnId)>=0" name="checkboxinput" class="input-checkbox" @click="checkedOne(item.palnId)"></td>
                                <td>{{item.jobName}}</td>
                                <td>{{item.companyName}}</td>
                                <td>{{item.deptName}}</td>
                                <td>{{item.leaderName}}</td>
                                <!-- <td>{{item.time1}}-{{item.time2}}</td> -->
                                <td style="width:450px"><span v-for="(item2,index) in item.stimeList" :key="item2.value">{{item2.time1}}-{{item2.time2}}<i v-if="index+1<item.stimeList.length">、</i></span></td>
                                <td style="width:350px">
                                    <p style="width:300px;display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;padding:0;margin:0;">{{item.remark}}</p>
                                </td>
                                <td style="width:10%">
                                    <router-link :to="{path:'check',query:{timeId:item.timeId,palnId:item.palnId}}">查看</router-link>
                                    <i style="width:30px;display:inline-block"></i>
                                    <router-link :to="{path:'revise',query:{timeId:item.timeId,palnId:item.palnId}}">修改</router-link>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </section>

        <!-- 分页 -->
        <div class="col-md-offset-8 col-md-4 clearfix" style="margin-top:20px;">
            <ctrlPage :setPage="getPlanList" :type="type" ref="page" />
        </div>
    </div>
</template>

<script>
import bumen from "@/components/common/scheduling/bumen.vue";
import danwei from "@/components/common/scheduling/danwei.vue";
import gangwei from "@/components/common/scheduling/gangwei.vue";
import ctrlPage from "@/components/common/ctrlPage.vue";

export default {
    data() {
        return {
            type: "total, prev, pager, next, jumper",
            total: "",
            selectData: {
                jobName: '',
                deptId: '',
                companyId: '',
            },
            nowTime: "",
            planList: [],
            deleteId: [],
            deleteList: '',
            isCheckedAll: false
        };
    },
    components: {
        bumen,
        danwei,
        gangwei,
        ctrlPage
    },
    mounted() {
        this.$refs.page.getList(1);
    },
    watch: {
        'deleteId'() {
            this.deleteList = '';
            this.deleteId.forEach(item => {
                this.deleteList += `${item},`;
            });
            this.deleteList = this.deleteList.substr(0, this.deleteList.length - 1);
        }
    },
    methods: {
        //是否选择
        checkedOne(id) {
            let idIndex = this.deleteId.indexOf(id)
            if (idIndex >= 0) {//如果已经包含就去除
                this.deleteId.splice(idIndex, 1)
            } else {//如果没有包含就添加
                this.deleteId.push(id)
            }
        },
        //控制全选按钮
        checkedAll(e) {
            this.isCheckedAll = e.target.checked;
            if (this.isCheckedAll) {//全选时
                this.deleteId = []
                this.planList.forEach(item => {
                    this.deleteId.push(item.palnId)
                })
            } else {
                this.deleteId = []
            }
        },
        //获取岗位列表
        getPlanList(pageIndex, pageSizes, callback) {
            this.$api.paiban.planList({
                pageNum: pageIndex || 1,
                pageSize: pageSizes || 10,
                jobName: this.selectData.jobName,
                deptId: this.selectData.deptId,
                companyId: this.selectData.companyId,
            }).then(res => {
                if (res.success) {
                    console.log(res);
                    this.planList = res.data.list
                    this.total = res.data.total;
                    callback(this.planList, this.total);
                }
            });
        },
        //重置查询条件
        reset() {
            this.selectData.jobName = "";
            this.selectData.deptId = "";
            this.selectData.companyId = "";
        },
        //删除岗位
        removeBatch() {
            if (this.deleteList != '') {
                // console.log(this.deleteList)
                this.$api.paiban.removeBatch({ list: this.deleteList }).then(res => {
                    if (res.success) {
                        console.log(res);
                        this.$$message({
                            message: "删除成功！",
                            type: "success"
                        });
                        this.$refs.page.getList(1);
                    }
                });
            } else {
                this.$$message({
                    message: "请选择要删除的内容",
                    type: "error"
                });
            }


        }
    },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.deal {
  padding: 10px;
  text-align: center;
  cursor: pointer;
}
</style>
